<template>
  <div class="app-container2 guizeipz_wrap">
    <div class="top_tabbar_wrap">
      <div class="top_tabbar_list">
        <div
          :class="['tabbar_item', actTabbarName === item.id && 'act']"
          v-for="item in tabbarList"
          :key="item.id"
          @click="changeTabbarItemFn(item)"
        >
          <div>{{ item.name }}</div>
        </div>
      </div>
      <div class="top_btn">新增规则</div>
    </div>
    <div class="bottom_main_warp">
      <component :is="actTabbarName"></component>
    </div>
  </div>
</template>
<script>
import tab1 from "./components/tab1.vue";
import tab2 from "./components/tab2.vue";
import tab3 from "./components/tab3.vue";
export default {
  components: { tab1, tab2, tab3 },
  data() {
    return {
      tabbarList: [
        {
          id: "tab1",
          name: "系统级故障分级规则",
        },
        {
          id: "tab2",
          name: "模块级故障分级规则",
        },
        {
          id: "tab3",
          name: "维修难易程度",
        },
      ],
      actTabbarName: null,
    };
  },
  created() {
    this.actTabbarName = "tab1";
  },
  methods: {
    changeTabbarItemFn(item) {
      this.actTabbarName = item.id;
    },
  },
};
</script>
<style lang="scss" scoped>
.guizeipz_wrap {
  width: 100%;
  border: 1px solid #233b5c;
  padding: 20px;
  background: linear-gradient(to bottom, #0a1f3d, #113468);
  color: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .top_tabbar_wrap {
    flex:  0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to right, #163c6f, #185b84, #163c6f);
    position: relative;
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 6px;
      border-top: 1px solid #2171a6;
      border-bottom: 1px solid #2171a6;
      bottom: 0;
      left: 0;
      right: 0;
    }
    .top_tabbar_list {
      display: flex;
      align-items: center;
      .tabbar_item {
        width: 190px;
        height: 54px;
        line-height: 54px;
        text-align: center;
        margin-left: 4px;
        background: linear-gradient(to right, #1b4a87, #1e659a, #1b4a87);
        cursor: pointer;
        &:first-child {
          margin-left: 0;
        }
        &.act,
        &:hover {
          background: linear-gradient(to right, #20579f, #258ac2, #20579f);
          z-index: 2;
        }
      }
    }
    .top_btn {
      cursor: pointer;
      padding: 0 18px;
      height: 26px;
      text-align: center;
      line-height: 26px;
      color: #fff;
      background: linear-gradient(to right, #20579f, #2788c0, #20579f);
      &:hover {
        opacity: 0.9;
      }
    }
  }
  .bottom_main_warp {
    flex: 1 1 auto;
  }
}
</style>
